<template>
  <view class="container">
    <view class="task-list">
      <view class="task-item" v-for="(task, index) in tasks" :key="index">
        <view class="task-header">
          <text class="task-title">{{task.gxrwRwmc}}</text>
        </view>
        <view class="task-details">
          <view class="info-item">
            <text class="label">学社导师：</text>
            <text class="value">{{getTchLabel(task.gxrwDs)  }}</text>
          </view>
          <view class="info-item">
            <text class="label">学生：</text>
            <text class="value">{{ task.gxrwXs }}</text>
          </view>
          <view class="info-item">
            <text class="label">企业导师：</text>
            <text class="value">{{ getTchLabel(task.gxrwQyds) }}</text>
          </view>
          <view class="info-item">
            <text class="label">下发时间：</text>
            <text class="value">{{ formatDateTime(task.createdate) }}</text>
          </view>
          <view class="info-item">
            <text class="label">状态：</text>
            <text class="value" :style="{ color: getStatusColor(task.status) }">{{ getlabel(task.gxrwLcjd) }}</text>
          </view>
		  <view class="info-item">
			<view class="view-button" @click="navigateToDetail(task)">
			<text>查看</text>
			</view>
		  </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
	
	import { listGxrw }from "@/api/admin/gxrw";
	import store from "@/store";
	import { allocatedUserList } from "@/api/system/role";
export default {
	
  data() {
    return {
      tasks: [],
	  tchList:[]
    };
  },
  onLoad() {
	  this.getTasks();
		  this.getTch()
        },
  methods: {
	  navigateToDetail(task) {
	    uni.navigateTo({
	      url: `/pages/wdgx/details/details?id=${task.id}`
	    })
	  },
    formatDateTime(dateTimeString) {
      // 格式化日期时间字符串为可读格式
      const date = new Date(dateTimeString);
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      const hours = String(date.getHours()).padStart(2, '0');
      const minutes = String(date.getMinutes()).padStart(2, '0');
      const seconds = String(date.getSeconds()).padStart(2, '0');
      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    },
    getStatusColor(status) {
      // 根据状态返回不同的颜色
      switch (status) {
        case '已过期未汇报':
          return 'red';
        case '进行中':
          return 'blue';
        case '已完成':
          return 'green';
        default:
          return 'black';
      }
    },
	getTasks(){
		const queryParams={
				  gxrwXs:store.getters.name,
		}
		listGxrw(queryParams).then(response=>{
			this.tasks=response.rows
		})
	},
	getlabel(value){
		if(value==='0')
		return '进行中'
		else if(value==='1')
		return '已完成'
		else if(value==='3')
		return '待评价'
		else return '已过期'
	},//获取教师列表
		getTch(){
			const queryParams= {
				roleId: 101
			}
			allocatedUserList(queryParams).then(res => {
				this.tchList = res.rows;
			});
		},
		getTchLabel(userName) {
			// 创建一个映射函数，该函数将ID映射到标签  
			const map = this.tchList.reduce((acc, item) => {  
			acc[item.userName] = item.nickName;
			return acc;  
			}, {});  
			// 返回一个函数，该函数接受一个ID并返回相应的标签  
			return map[userName] || 'Unknown Label';  
		}  
  }
};
</script>

<style scoped>
.container {
  padding: 30rpx;
  background-color: #f5f7fa;
  min-height: 100vh;
}

.task-list {
  display: flex;
  flex-direction: column;
  gap: 24rpx;
}

.task-item {
  background-color: #ffffff;
  padding: 30rpx;
  border-radius: 16rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
}

.task-header {
  margin-bottom: 20rpx;
}

.task-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #303133;
}

.task-details {
  display: flex;
  flex-direction: column;
  gap: 16rpx;
}

.info-item {
  display: flex;
  align-items: flex-start;
  line-height: 1.6;
}

.label {
  font-size: 28rpx;
  color: #606266;
  width: 180rpx;
  flex-shrink: 0;
}

.value {
  flex: 1;
  font-size: 28rpx;
  color: #303133;
}

.view-button {
  margin-top: 20rpx;
  padding: 16rpx 32rpx;
  background-color: #409eff;
  color: white;
  border-radius: 8rpx;
  font-size: 28rpx;
  text-align: center;
  transition: all 0.3s ease;
}

.view-button:active {
  background-color: #3a8ee6;
}

/* 状态样式 */
.value[style*="color: red"] {
  color: #f56c6c !important;
}

.value[style*="color: blue"] {
  color: #409eff !important;
}

.value[style*="color: green"] {
  color: #67c23a !important;
}
</style>